import React, { Component } from 'react';
import {
  StyleSheet, View, Text,
} from 'react-native';

import Timeline from 'react-native-timeline-listview';

class Tab2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  _getDataShow = () => {
    if (!this.props.data || !this.props.data.length) {
      return [];
    }
    const timelineData = [];
    this.props.data.forEach(item => {
      timelineData.push({
        time: item.startTime, // 处理时间
        title: `${item.stepCodeDesc || ''}`,
        description: `处理人:${item.handlerName || ''} ${item.handler || ''}\n${this._getDiffrentDescription(item)}`,
      });
    });
    return timelineData;
  }

  _getDiffrentDescription = (item) => {
    const { stepCode } = item;
    const description = item.description || '';
    switch (stepCode) {
      case '02':
        return `故障现象:${description} ${item.failureKeywords}`;
      case '03':
        return '';
      case '04':
        return '';
      case '05':
        return `退回意见:${description}`;
      case '06':
        return `故障原因:${this.props.failureCause || ''}\n处理过程:${description} ${item.keywords}`;
      case '07':
        return '';
      case '08':
        return `验收意见:${description}`;
      case '09':
        return `验收意见:${description}`;
      default:
        return `处理意见:${description}`;
    }
  }

  // _getLoading = () => (
  //   <View style={{
  //     display: 'flex',
  //     justifyContent: 'center',
  //     alignItems: 'center',
  //     flex: 1,
  //     backgroundColor: 'rgba(0,0,0,0.7)',
  //   }}
  //   >
  //     <ActivityIndicator size="large" color="#0000ff" />
  //   </View>
  // )

  changeToThisTab = () => {
    const { show } = this.state;
    this.setState({
      show: !show,
    });
  }

  renderTime = (rowData) => (
    <Text style={{
      color: '#ffffff', paddingLeft: 4, paddingRight: 4,
    }}
    >
      {rowData.time.replace(' ', '\n')}
    </Text>
  )

  renderDetail = (rowData) => {
    const title = <Text style={[styles.title]}>{rowData.title}</Text>;
    let desc = null;
    if (rowData.description) {
      desc = (
        <View style={styles.descriptionContainer}>
          <Text style={[styles.textDescription]}>{rowData.description}</Text>
        </View>
      );
    }
    return (
      <View style={{ flex: 1, marginTop: -12, marginBottom: desc ? 10 : 20 }}>
        {title}
        {desc}
      </View>
    );
  }

  _getTimeLine = (data) => (
    <Timeline
      circleSize={16}
      circleColor="rgb(68,101,225)"
      lineColor="rgb(216,216,216)"
      timeStyle={{ color: '#ffffff' }}
      titleStyle={{ color: '#ffffff' }}
      descriptionStyle={{ color: '#ffffff' }}
      renderDetail={this.renderDetail}
      iconStyle={{ marginTop: -2 }}
      options={{
        style: { paddingTop: 5 },
        removeClippedSubviews: true,
      }}
      data={data}
      separator={false}
      renderTime={this.renderTime}
    />
  )

  render() {
    const data = this._getDataShow();
    return (
      <View>
        <View style={styles.tabContent}>
          {/* <Text>1111</Text> */}
          {this._getTimeLine(data)}
        </View>
        {/* {this.props.showLoading ? this._getLoading() : this._getTimeLine()} */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    marginTop: 10,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  descriptionContainer: {
    flexDirection: 'row',
    paddingRight: 50,
  },
  textDescription: {
    marginLeft: 4,
    color: '#ffffff',
  },
});

export default Tab2;
